<!--
* @description 参数1
* @fileName 04.类样式
* @author userName
* @date 2024-01-23 10:16:01
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>04.类样式</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <style>
        .box01 {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .box02 {
           border: 10px solid blue;
        }

        .box03 {
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <!-- 
      类样式  支持对象的形式 
          类:true/false

     -->
    <div id="app">
        <button @click="handlerAddBox01">添加box01</button>
        <button  @click="handlerAddBox02">添加box02</button>
        <button  @click="handlerAddBox03">添加box03</button>
        <button  @click="handlerRemoveBox02">移除box02</button>
        <button  @click="handlerRemoveBox03">移除box03</button>
        <div :class="myClass"></div>
        <hr>
        <div :class="myClassArray"></div>
    </div>

    <script>
        var vm = new Vue({
            data:{
                myClass:{
                    box01:false,
                    box02:false,
                    box03:false
                },
                myClassArray:[]
            },
            methods: {
                handlerAddBox01() {
                    this.myClass.box01 = true
                    this.myClassArray.push("box01")
                    
                },
                handlerAddBox02() {
                    this.myClass.box02 = true
                    this.myClassArray.push("box02")
                },
                handlerAddBox03() {
                    this.myClass.box03 = true
                    this.myClassArray.push("box03")
                },
                handlerRemoveBox02() {
                    this.myClass.box02 = false
                    const index = this.myClassArray.findIndex(value => value == "box02")
                    console.log(index);
                    this.myClassArray.splice(index,1)
                },
                handlerRemoveBox03() {
                    this.myClass.box03 = false
                    const index = this.myClassArray.findIndex(value => value == "box03")
                    this.myClassArray.splice(index,1)
                }
            },
        });
        vm.$mount("#app")
    </script>
</body>

</html>